<template>
    <div style="padding: 20px;">
        <div style="font-size: 12px;color: #747474;">
            <button class="btn btn-info" @click="addTypeEditor"><i class="fa fa-plus"></i></button>

            <div style="margin-top: 10px;">
                <template v-for="(type,index) in types">
                    <TypeEditor :type="type" v-on:deleteEditor="deleteEditor(index)"></TypeEditor>
                </template>
            </div>
        </div>
    </div>
</template>
<script>

    import TypeEditor from './TypeEditor'
    export default{
        data(){
            return {
                types:[]
            }
        },
        components: { TypeEditor },
        directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        methods:{
            deleteEditor:function (index) {
                const that = this;
                let types = this.types;
                this.types = null;
                setTimeout(function () {
                    types.splice(index,1);
                    that.types = types;
                })
            },
            addTypeEditor:function () {
                const that = this;
                $.post('/message/type/update',{},function (result) {
                    let types = that.types;
                    that.types = null;
                    setTimeout(function () {
                        types.unshift(result);
                        that.types = types;
                    })
                });
            }
        },
        mounted:function () {
            const that = this;
            $.post('/message/type/find',{},function (result) {
                if(result instanceof Array){
                    that.types = result;
                }
            })
        }
    }

</script>